
@category-height:2rem;
@category-line-height:2;

.store-menu{
    .icon-search{
        &:before{
            font-size:1.3rem;
        }
    }
}

.menu-body{
    position: absolute;
    width: 100%;
    top: @header-height;
    left: 0;
    bottom: 0;
    background-color: @color-theme-white;
}

.wx{
    .menu-body{
        top:0;
    }
}

.category-wrapper{
    position: absolute;
    background-color: #f2f2f2;
    top: 0;
    width: 6rem;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.menu-wrapper{
    position: absolute;
    left: 6rem;
    top: 0;
    right: 0;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.category{
    .clearfix;
    width: 100%;
    padding-bottom:4.5rem;
    .category-item{
        font-size:1rem;
        line-height: 1.2;
        width: 100%;
        padding: 1.2rem .5rem 1.2rem 1rem;
        float: left;
        color: @color-theme-black;
        &.on{
            background-color: @color-theme-white;
            color: @color-theme-red;
        }
        
        
    }
}
@menu-item-height:4rem;
@column-count:2;
.menu-list{
    &:extend(.clearfix all);
    padding-left: .5rem;
    padding-right: .5rem;
    padding-bottom: 6rem;
    .menu-item{
        position: relative;
        float: left;
        width: 100%;
        padding: .6rem 0;
        color: @color-theme-black;
        border-bottom: 1px solid @color-theme-light-gray;
        &:last-child{
            border-bottom:none;
        }

        .soldout{
            position: absolute;
            right:1rem;
            top: 1rem;
            display: none;
            color: @color-theme-red;
            -webkit-transform: rotateZ(-25deg);
            transform: rotateZ(-25deg);
            z-index: 55;
            line-height:1;
            &:before{
                font-size: 4rem;
            }
        }
    }
    .menu-right{
        margin-left: @thumb-size + .5;
    }
    
    @thumb-size:4rem;

    .line{
        position: relative;
        line-height:1.5rem;
    }
    .price{
        display: inline-block;
        text-align: center;
        color: @color-theme-red;
        background-color: @color-theme-white;
    }
    .menu-name{
        position: relative;
        color: @color-theme-black;
        z-index: 2;
        .name{
            max-width: 80%;
            overflow: hidden;
            -ms-text-overflow: ellipsis;
            text-overflow: ellipsis;
            white-space:nowrap;
        }
    }
    .origin-price{
        text-decoration: line-through;
        font-size: .8rem;
    }
    
    .thumb{
        height:@thumb-size;
        width: @thumb-size;
        float: left;
        background-color: @color-theme-gray;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

}

.menu-operation{
    position: absolute;
    top:0;
    right: 0;
    width:5rem;
    height:100%;
    .count{
        display: none;
        width: 2rem;
        position: absolute;
        right: 1.5rem;
        text-align: center;
        color: @color-theme-black;
        &.show{
            display: inline-block;
        }
        line-height:1.5rem;
    }
    .add{
        position: absolute;
        right:0;
    }
    .add:before,.minus:before{
        color: @color-theme-red;
        font-size: 1.5rem;
    }
    .minus{
        position: absolute;
        left:0;
        display: none;
    }
}

@cart-bottom-line-height:3.5rem;
.cart-wrapper{
    width:100%;
    position: fixed;
    bottom:0;
    left:0;
    background-color: @color-font-white;
    z-index: 100000;

    .cart-bottom-line{
        position: absolute;
        width:100%;
        bottom:0;
        left:0;
        z-index: 102444;
        height: @cart-bottom-line-height;
        border-top:1px solid @color-theme-light-gray;
        //background-color: rgba(0,0,0,.9);
        background-color: @color-theme-white;
        &.unpayed{
            .cart-count,.cart-book{
                background-color: @color-theme-green;
            }
            .cart-price{
                color: @color-theme-green;
            }
        }
    }

    .vertical-line{
        display: inline-block;
        height:1.5rem;
        line-height:@cart-bottom-line-height;
      //  background-color: @color-theme-white;
        background-color: @color-theme-light-gray;
        width:1px;
    }

    .cart-price{
        display: inline-block;
        top:0;
        position: absolute;
        left: 4.5rem;
        font-size: 1.2rem;
        height:@cart-bottom-line-height;
        line-height:@cart-bottom-line-height;
        color: @color-theme-red;
        padding-left:.5rem;

    }

    .cart-book{
        font-size: 1.2rem;
        color: @color-theme-white;
        background-color: @color-theme-red;
        position: absolute;
        right:0;
        height: 100%;
    }
    .left-cart{
        position: relative;;
        display: inline-block;
    }

    .left-cart:before{
        font-size: 2rem;
        padding:0 1rem;
        line-height:@cart-bottom-line-height;
        //color: @color-theme-white;
        color: @color-theme-black;
    }

}

@cart-count-size:1.3rem;
.cart-count{
    color: @color-theme-white;
    position: absolute;
    right:.5rem;
    top:.3rem;
    display: inline-block;
    width:@cart-count-size;
    height:@cart-count-size;
    line-height:@cart-count-size;
    text-align: center;
    font-size:@cart-count-size/2;
    border-radius: @cart-count-size/2;
    background-color: @color-theme-red;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: normal;
}


.food-list-wrapper{
    position: absolute;
    display: none;
    z-index: 1000000;
    width:100%;
    top:0;
    bottom:@cart-bottom-line-height;
    background-color: rgba(0,0,0,.4);
    .food-list{
        position: absolute;
        width:100%;
        bottom:0;
        overflow: hidden;
        background-color: @color-theme-white;

        @food-header-height:2.5rem;
        .wrapper{
            width:100%;
            overflow-y: auto;
            max-height:300px;
            -webkit-overflow-scrolling: touch;
        }
        .food-header{
            position: relative;
            width:100%;
            height:@food-header-height;
            background-color:@color-theme-light-gray;
            .food-header-left{
                position: absolute;
                top:0;
                line-height:@food-header-height;
                left:@page-padding-h;
            }

            .food-header-right{
                position: absolute;
                top:0;
                line-height:@food-header-height;
                right:@page-padding-h;
            }
        }

        @food-item-height:3rem;
        .food-item{
            position: relative;
            margin-left: @page-padding-h;
            line-height:@food-item-height;
            border-bottom: 1px solid @color-theme-light-gray;
            &:extend(.clearfix all);
            &:last-child{
                border-bottom: none;
            }
        }

        .food-name{
            font-size:1rem;
            line-height:@food-item-height;
        }

        .food-line{
            display: inline-block;
            position: absolute;
            right:1rem;
            top:0;
            height:100%;
            width:40%;
            
            .price{
                color: @color-theme-red;
            }
        }

        .menu-operation{
            top:0;
            height:@food-item-height;
            line-height:@food-item-height;

            .minus,.count,.add{
                display: inline-block;
            }
            .count{
                line-height:@food-item-height;
            }
        }
    }
}








